<template>
  <div class="strut-div">
    <div class="window-item agro-window">
      <div class="window-title">
        <img src="@/assets/imgs/tg/agro-icon.png" alt="menu" />
        农业产业结构
      </div>
      <div class="window-main">
        <common-pieNew-chart ref="agroStructurePie" :config="agroStructurePieConfig"></common-pieNew-chart>
      </div>
    </div>
    <div class="window-item income-window">
      <div class="window-title pop-income-title">
        <img src="@/assets/imgs/tg/wallet-icon.png" alt="menu" />
        居民收入
      </div>
      <div class="window-main">
        <!-- <common-bar-chart ref="peopleIncome" :config="peopleIncomeConfig"></common-bar-chart> -->
        <common-line-chart ref="peopleIncome" :config="peopleIncomeConfig"></common-line-chart>
      </div>
    </div>
    <div class="window-item agro-num-window">
      <div class="window-title">
        <img src="@/assets/imgs/tg/agro-icon.png" alt="menu" />
        太谷县主要农产品产量
      </div>
      <div class="window-main">
        <common-horizontal-bar-chart ref="productYield" :config="productYieldConfig"></common-horizontal-bar-chart>
      </div>
    </div>
  </div>
</template>
<script>
import CommonPieNewChart from "@/components/common/common-pieNew-chart.vue";
import CommonBarChart from "@/components/common/common-bar-chart.vue";
import CommonLineChart from "@/components/common/common-line-chart.vue";
import CommonHorizontalBarChart from '@/components/common/common-horizontal-bar-chart.vue';

import {
  industryStructProportionChart,
  colorList,
  peopleIncomeBarChart,
  mainAgriculturalProcutNumsBarChart
} from "@/network/tg-fake-data.js";

export default {
  name: "ng-right",
  components: {
    CommonPieNewChart,
    CommonBarChart,
    CommonLineChart,
    CommonHorizontalBarChart
  },
  data() {
    return {
      agroStructurePieConfig: {
        option: {
          id: "agroStructurePie",
          title: "",
          color: colorList,
          tooltip: {
            trigger: "item",
            formatter: "{b} : {c} ({d}%)"
          },
          series: [
            {
              name: "",
              type: "pie",
              radius: ["20%", "55%"],
              center: ["50%", "50%"],
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: "outer",
                  formatter: "{b} :  {d}%",
                  fontSize: "16"
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: "16",
                    fontWeight: "bold"
                  }
                }
              },
              labelLine: {
                normal: {
                  show: true
                }
              },
              data: []
            }
          ]
        }
      },
      peopleIncomeConfig: {
        option: {
          id: "peopleIncome",
          x: [],
          y: []
        }
      },
      peopleIncomeBarChart: JSON.parse(JSON.stringify(peopleIncomeBarChart)),
      productYieldConfig: {
        option: {
          id: 'productYield',
          yAxis: mainAgriculturalProcutNumsBarChart.dimension.reverse(),
          x: [
            {
              title: '数量',
              data: mainAgriculturalProcutNumsBarChart.datas.reverse(),
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 0,
                colorStops: [{
                  offset: 0,
                  color: '#4465F3' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#00FAFF' // 100% 处的颜色
                }],
              },
              stack: '1',
              position: 'right',
              axis: {
                min: 0,
                max: 0,
                name: '单位(吨)'
              }
            }
          ]
        }
      }
    };
  },
  mounted() {
    this.initAgroStructure();
    this.initPeopleIncomeBar();
    this.$refs.productYield.initChart();
  },
  methods: {
    initAgroStructure() {
      industryStructProportionChart.map((item, index) => {
        // this.agroStructurePieConfig.option.legend.data.push(item.industry);
        this.agroStructurePieConfig.option.series[0].data.push({
          value: item.price,
          name: item.industry
        });
      });
      this.$refs.agroStructurePie.initChart();
    },
    initPeopleIncomeBar() {
        this.peopleIncomeBarChart.source[0].splice(0, 1)
        var type = this.peopleIncomeBarChart.source[0];

        this.peopleIncomeBarChart.source.forEach((item,index) => {
          if (index > 0) {
            this.peopleIncomeConfig.option.x.push(this.peopleIncomeBarChart.source[index].splice(0, 1)[0]);
          }
        });

        this.peopleIncomeBarChart.source.shift()

        type.map((item, index) => {
          var bar = {
            title: item,
            data: this.peopleIncomeBarChart.source.map(val => val[index]),
            color: colorList[index],
            position: 'top'
          };
          if (index == 0) {
            bar.axis = {
              min: 0,
              max: null,
              name: '单位(亿元)'
            };
          }

          this.peopleIncomeConfig.option.y.push(bar);

        });
        this.$refs.peopleIncome.initChart();
      }
  }
};
</script>
<style lang="scss" scoped>
.window-item {
  width: 430px;
  background: url("../../../assets/imgs/tg/chart-window.png") no-repeat;
  background-size: 100% 100%;
  .window-title {
    height: 70px;
    line-height: 70px;
    font-size: 22px;
    color: #aaddff;
    padding-left: 20px;
    > img {
      vertical-align: middle;
    }
  }
  .pop-income-title.window-title {
    padding-left: 10px;
  }
  .window-main {
    height: calc(100% - 70px);
  }
}
.agro-window {
  height: 315px;
}
.income-window {
    height: 320px;
  margin-top: 10px;

}
.agro-num-window {
    height: 355px;
  margin-top: 10px;

}
</style>